import React, { Component } from 'react'
import title1 from '../static/image/title1.png'
import title2 from '../static/image/map.png'
import peoplepic from '../static/image/people.png'
import car from '../static/image/car.png'
import ms from '../static/image/ms.png'
import ht from '../static/image/ht.png'
import dp from '../static/image/dp.png'
import xu from '../static/image/xu.png'
import jf from '../static/image/jf.png'
import mss from '../static/image/mss.png'

import '../css/goods.css'
import { getGoodsList, getNewPeople, getThousandPeople, seckillList, addCart, getCountdown } from '../request/api'
export default class index extends Component {
    constructor() {
        super()
        this.state = {
            newPeopleGoods: [],
            thousandPeople: [],
            goodsList: [{ content: [] }, { content: [] }, { content: [] }, { content: [] }],
            skillList: [],
            index: 0,
            oneTime:{},
            timer:''
        }
    }
    render() {
        const { newPeopleGoods, thousandPeople, goodsList, skillList, index,oneTime } = this.state
        return (
            <div className='goods'>
                <div className="title">
                    <img className='img1' src={title1} alt="" />
                    <input type="text" placeholder='请输入商品' />
                    <img className="img2" src={title2} alt="" />
                </div>
                <div className='minboxs'>
                    <div className='newpeople'>
                        <div className='peopleleft'>
                            <img src={peoplepic} alt="" />
                            <div className='time'>
                                <div className='one'>05</div>
                                <div className='two'>:</div>
                                <div className='three'>42</div>
                                <div className='four'>:</div>
                                <div className='five'>47</div>
                            </div>
                        </div>
                        <div className='graybox'>查看全部&gt;</div>
                    </div>
                    <div className='mmmmm'>
                        <div className="middleboxs">
                            <div className='top'>
                                <div className='left'>1重礼</div>
                                <div className='min'>信任特价商品专区</div>
                                <div className='right'>(限量供应, 先到先得)</div>
                            </div>
                            <div className='centerbox'>
                                <div className='boxss'>
                                    {newPeopleGoods.map((item) => (
                                        <div className='abox' key={item.id}>
                                            <img className='imgpic' src={this.$pregImg + item.img} />
                                            <div className='ab'>
                                                <div className='al'>
                                                    <div>&yen;{item.price}</div>
                                                    <del>&yen;{item.market_price}</del>
                                                </div>
                                                <div className="ar">
                                                    <img className='car' src={car} alt="" />
                                                </div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className='quan'>
                    <div className='quanbox'>
                        <div className="qtop">
                            <div className='ql'>2重礼</div>
                            <div className='qm'>新人通用50元礼券</div>
                            <div className='qr'>(下单立减,省了又省)</div>
                        </div>
                        <div className='quanm'>
                            <div className='qo'>
                                <div className='qoo'>已领取</div>
                                <div>&yen;50</div>
                                <div>全场通用</div>
                            </div>
                            <div className="qt">
                                <div className="qtl">
                                    <div className='qtt'>下单后可得</div>
                                    <div className='aaas'>&yen;100</div>
                                    <div>新人领券包</div>
                                </div>
                                <div className='qtr'>
                                    <div className='qtrz'>查看券包</div>
                                    <div className='qc'>&gt;</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className='ms'>
                    <div className='mss'>
                        <div className='msbox'>
                            <img src={ms} alt="" />
                            限时秒杀
                        </div>
                        <div className='msbox'>
                            <img src={ht} alt="" />
                            畅销商品
                        </div>
                        <div className='msbox'>
                            <img src={dp} alt="" />
                            品质大牌
                        </div>
                        <div className='msbox'>
                            <img src={xu} alt="" />
                            小U自营
                        </div>
                        <div className='msbox'>
                            <img src={jf} alt="" />
                            积分商城
                        </div>
                    </div>
                </div>
                <div className='cm'>
                    <div className='cmm'>
                        <div className="cmmt">
                            <img src={mss} alt="" />
                            <div className='ctime'>
                                <div className='cone'>{oneTime.shi}</div>
                                <div className='ctwo'>:</div>
                                <div className='cthree'>{oneTime.fen}</div>
                                <div className='cfour'>:</div>
                                <div className='cfive'>{oneTime.miao}</div>
                            </div>
                        </div>
                        <div className="cmbox">
                            {skillList.map(item => (
                                <div className="cmmm" key={item.id}>
                                    <img src={this.$pregImg + item.img} alt="" />
                                    <div className='cmmmr'>
                                        <div className='discount'>7.9折</div>
                                        <div>{item.goodsname}</div>
                                        <div className="cmmmo">
                                            <div className="tu"></div>
                                            <div className="onebuy">每人限购1件</div>
                                        </div>
                                        <div className='buyn'>
                                            <div className='money'>&yen;{item.price}</div>
                                            <del>{item.market_price}</del>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
                <div className="middleboxs" id='ab'>
                    <div className='top '>
                        <div className='left' id='bc'>限时秒杀</div>
                        <div className='min' id='bc'>信任特价商品专区</div>
                        <div className='right' id='bc'>(限量供应, 先到先得)</div>
                    </div>
                    <div className='centerbox'>
                        <div className='boxss '>
                            {thousandPeople.map((item) => (
                                <div className='abox' id='cd' key={item.id}>
                                    <img className='imgpic' src={this.$pregImg + item.img} />
                                    <div className='ab'>
                                        <div className='al'>
                                            <div>&yen;{item.price}</div>
                                            <del>&yen;{item.market_price}</del>
                                        </div>
                                        <div className="ar">
                                            <img className='car' src={car} alt="" onClick={() => this.addcarts(item.id, 2)} />
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
                <div className='yu'>
                    <div className='yuu'>
                        <div className='yl'>
                            <div className="ylt">双十一尖货预约</div>
                            <div className='twoone'></div>
                        </div>
                        <div className='yr'>
                            <div className="ylt">畅购全球</div>
                            <div className='cgt'>
                                <div className='cones'></div>
                                <div className='ctwos'></div>
                            </div>
                        </div>
                    </div>

                </div>
                <div className='hh'>
                    <div className='hhh'>
                        <div className='hbox' onClick={() => this.changeIndex(0)}>
                            <div>热销好货</div>
                            <div className='hhq'>限量抢购</div>
                        </div>
                        <div className='hbox' onClick={() => this.changeIndex(1)}>
                            <div>折上折区</div>
                            <div className='hhq'>不买就亏</div>
                        </div>
                        <div className='hbox' onClick={() => this.changeIndex(2)}>
                            <div>时令水果</div>
                            <div className='hhq'>当季限定</div>
                        </div>
                        <div className='hbox' onClick={() => this.changeIndex(3)}>
                            <div>粮油调味</div>
                            <div className='hhq'>一键购齐</div>
                        </div>
                    </div>
                </div>
                <div className='lists'>
                    {goodsList[index].content.map(item => (
                        <div className="list" key={item.id} >
                            <img className='ll' src={this.$pregImg + item.img} alt="" onClick={() => this.goodsinfo(item.id)} />
                            <div className='llr'>
                                <div className='discounts'>7.9折</div>
                                <div>{item.goodsname}</div>
                                <div className="ttuu">
                                    <div className='ww'>直降198元</div>
                                    <div className='gg'>限购一件</div>
                                </div>
                                <div className="llb">
                                    <div className='add'>
                                        <div className='mon'>&yen;{item.price}</div>
                                        <del>&yen;{item.market_price}</del>
                                    </div>
                                    <div className='adds' onClick={() => this.addcarts(item.id, 1)}>加入购物车</div>
                                </div>

                            </div>
                        </div>
                    ))}
                </div>
            </div>
        )
    }
    componentDidMount() {
        getNewPeople().then(res => {
            if (res.code === 200) {
                // console.log(res.list);
                this.setState({ newPeopleGoods: res.list })
                // console.log(this.state.newPeopleGoods);
            }
        })
        getThousandPeople().then(res => {
            if (res.code === 200) {
                this.setState({ thousandPeople: res.list })
                // console.log(this.state.ThousandPeople);
            }
        })
        getGoodsList().then(res => {
            if (res.code === 200) {
                this.setState({ goodsList: res.list })
                // console.log(this.state.goodsList);
            }
        })
        seckillList().then(res => {
            if (res.code === 200) {
                this.setState({ skillList: res.list })
                // console.log(this.state.skillList);
            }
        })
            let tim=setInterval(() => {
                getCountdown().then(res => {
                    let time = res.list[0].endtime - new Date()
                    let timeObj = {}
                    timeObj.shi = (Math.floor((time / (1000 * 60 * 60)) % 24)+'').padStart(2,'0');
                    timeObj.fen = (Math.floor((time / (1000 * 60)) % 60)+'').padStart(2,'0');
                    timeObj.miao = (Math.floor((time / 1000) % 60)+'').padStart(2,'0');
                    // console.log(timeObj);
                    this.setState({oneTime:timeObj})
                })
            }, 500);
            this.setState({timer:tim})
    }
    componentWillUnmount(){
        clearInterval(this.state.timer)
    }
    changeIndex(a) {
        this.setState({ index: a })
    }
    goodsinfo(id) {
        this.props.history.push(`/goodsinfo/${id}`)
    }
    addcarts(id, type) {
        // console.log(123);
        if (JSON.parse(sessionStorage.getItem('user'))) {
            let obj = {
                uid: JSON.parse(sessionStorage.getItem('user')).uid,
                type: type,
                goodsid: id,
                num: 1
            }
            // console.log(obj);
            addCart(obj).then(res => {
                if (res.code == 200) {
                    // console.log(res);
                    alert('添加成功')
                }
            })
        } else {
            this.props.history.push('/phonelogin')
        }

    }
}
